import React from 'react';
import { Box, BoxProps } from '@mui/material';
import { Card, CardSuit, CardValue } from '../../store/gameSlice';

interface PlayingCardProps extends BoxProps {
  card?: Card;
  isHidden?: boolean;
  isSelected?: boolean;
  size?: 'small' | 'medium' | 'large';
  onClick?: () => void;
}

// 将CardValue转换为显示文本
const getCardDisplayValue = (value: CardValue): string => {
  switch (value) {
    case CardValue.ACE: return 'A';
    case CardValue.KING: return 'K';
    case CardValue.QUEEN: return 'Q';
    case CardValue.JACK: return 'J';
    default: return value.toString();
  }
};

// 将CardSuit转换为显示符号
const getCardDisplaySuit = (suit: CardSuit): string => {
  switch (suit) {
    case CardSuit.HEARTS: return '♥';
    case CardSuit.DIAMONDS: return '♦';
    case CardSuit.CLUBS: return '♣';
    case CardSuit.SPADES: return '♠';
    default: return '';
  }
};

// 获取花色颜色
const getSuitColor = (suit: CardSuit): 'red' | 'black' => {
  return suit === CardSuit.HEARTS || suit === CardSuit.DIAMONDS ? 'red' : 'black';
};

// 获取卡片尺寸
const getCardSize = (size: 'small' | 'medium' | 'large') => {
  switch (size) {
    case 'small': return { width: 40, height: 60, fontSize: '0.8rem' };
    case 'medium': return { width: 60, height: 90, fontSize: '1rem' };
    case 'large': return { width: 80, height: 120, fontSize: '1.2rem' };
    default: return { width: 60, height: 90, fontSize: '1rem' };
  }
};

const PlayingCard: React.FC<PlayingCardProps> = ({
  card,
  isHidden = false,
  isSelected = false,
  size = 'medium',
  onClick,
  ...boxProps
}) => {
  const cardSize = getCardSize(size);
  
  // 如果卡片被隐藏，显示背面
  if (isHidden || !card) {
    return (
      <Box
        sx={{
          width: cardSize.width,
          height: cardSize.height,
          backgroundColor: '#1a237e',
          border: '1px solid #000',
          borderRadius: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          cursor: onClick ? 'pointer' : 'default',
          transform: isSelected ? 'translateY(-10px)' : 'none',
          transition: 'transform 0.2s ease-in-out',
          boxShadow: isSelected ? '0 4px 8px rgba(0,0,0,0.3)' : '0 2px 4px rgba(0,0,0,0.2)',
          position: 'relative',
          overflow: 'hidden',
          ...boxProps.sx
        }}
        onClick={onClick}
        {...boxProps}
      >
        {/* 卡片背面图案 */}
        <Box
          sx={{
            width: '80%',
            height: '80%',
            backgroundColor: '#283593',
            borderRadius: 0.5,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            border: '1px solid #3949ab'
          }}
        >
          <Box
            sx={{
              width: '60%',
              height: '60%',
              backgroundColor: '#3949ab',
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontWeight: 'bold',
              fontSize: cardSize.fontSize
            }}
          >
            ♠
          </Box>
        </Box>
      </Box>
    );
  }

  // 显示卡片正面
  const suitColor = getSuitColor(card.suit);
  const displayValue = getCardDisplayValue(card.value);
  const displaySuit = getCardDisplaySuit(card.suit);
  
  return (
    <Box
      sx={{
        width: cardSize.width,
        height: cardSize.height,
        backgroundColor: 'white',
        border: '1px solid #000',
        borderRadius: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between',
        cursor: onClick ? 'pointer' : 'default',
        transform: isSelected ? 'translateY(-10px)' : 'none',
        transition: 'transform 0.2s ease-in-out',
        boxShadow: isSelected ? '0 4px 8px rgba(0,0,0,0.3)' : '0 2px 4px rgba(0,0,0,0.2)',
        padding: '4px',
        position: 'relative',
        ...boxProps.sx
      }}
      onClick={onClick}
      {...boxProps}
    >
      {/* 左上角 */}
      <Box
        sx={{
          position: 'absolute',
          top: 4,
          left: 4,
          color: suitColor,
          fontWeight: 'bold',
          fontSize: cardSize.fontSize,
          lineHeight: 1
        }}
      >
        {displayValue}
        <Box component="span" sx={{ display: 'block', fontSize: '0.8em' }}>
          {displaySuit}
        </Box>
      </Box>
      
      {/* 中心花色 */}
      <Box
        sx={{
          color: suitColor,
          fontSize: `calc(${cardSize.fontSize} * 1.5)`,
          fontWeight: 'bold'
        }}
      >
        {displaySuit}
      </Box>
      
      {/* 右下角（倒置） */}
      <Box
        sx={{
          position: 'absolute',
          bottom: 4,
          right: 4,
          color: suitColor,
          fontWeight: 'bold',
          fontSize: cardSize.fontSize,
          lineHeight: 1,
          transform: 'rotate(180deg)'
        }}
      >
        {displayValue}
        <Box component="span" sx={{ display: 'block', fontSize: '0.8em' }}>
          {displaySuit}
        </Box>
      </Box>
    </Box>
  );
};

export default PlayingCard;